<template>
  <div id="order">
    <!-- tab 切换 -->
    <MyTab @submit_toggle="setCurrentIndex"/>
    <!-- 订单详情 -->
    <!-- 正常订单 -->
    <div class="order_list" v-if="currentIndex === 0">
      <orderList orderType="commonOrder"/>
    </div>
    <!-- 退换货订单 -->
    <div class="order_list" v-show="currentIndex === 1">
      <orderList orderType="refundOrder"/>
    </div>
  </div>
</template>
<script>
import '../../css/layout.css'
import '@/utils/rem.js';
import MyOrder from '../../components/order/order';
import MyTab from '../../components/tab/tab';
import orderList from '../../components/order/orderList'

export default {
  	name: 'order',
  	data() {
  		return {
        isNormal: true,
        currentIndex: 0,
        refundOrderList: [],
        commonOrderList: [],
  		}
  	},
  	computed: {
  	},
  	methods: {
      setCurrentIndex: function (index) {
        this.currentIndex = index;
        console.log('index:', this.currentIndex);
      }
    },
    components: {
      MyOrder,
      MyTab,
      orderList
    }
}  
</script>>
<style lang="less">
@import	"../../css/common";
html {
  height: 100%;
  body{
    height: 100%;
    #order {
      background-color: #f8f8f8;
      height: 100%;
      .order_list {
        overflow: hidden;
        background-color: #f8f8f8;
      }
    }
  }
}
</style>